<script setup lang="ts">
import { computed, ref, reactive, onMounted, onUnmounted, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: () => false
  },
  dropdownList: {
    type: Array,
    default: () => [] as any
  },
  dropdown: {
    type: Object,
    default: () => {
      return {
        x: 0,
        y: 0
      }
    }
  }
})

const emit = defineEmits(['update:modelValue', 'click'])

const inputValue = ref(props.modelValue)

const arrowLeft = ref(10)

const dropdownList: any = ref(props.dropdownList)

const state = reactive({
  defaultActive: ''
})

const dropdowns = computed(() => {
  // 117 为 `Dropdown 下拉菜单` 的宽度
  if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
    return {
      x: document.documentElement.clientWidth - 117 - 5,
      y: props.dropdown.y
    }
  } else {
    return props.dropdown
  }
})

const menuClick = (item: any) => {
  closeContextmenu()
  emit('click', item.command)
}

const closeContextmenu = () => {
  inputValue.value = false
  emit('update:modelValue', inputValue.value)
}

onMounted(() => {
  document.body.addEventListener('click', closeContextmenu)
})
// 页面卸载时，移除右键菜单监听事件
onUnmounted(() => {
  document.body.removeEventListener('click', closeContextmenu)
})

watch(
  () => props.modelValue,
  (val) => {
    inputValue.value = val
  }
)

watch(
  () => props.dropdown,
  ({ x }) => {
    if (x + 117 > document.documentElement.clientWidth) {
      arrowLeft.value = 117 - (document.documentElement.clientWidth - x)
    } else {
      arrowLeft.value = 10
    }
  },
  {
    deep: true
  }
)
</script>

<template>
  <transition name="el-zoom-in-center">
    <div
      aria-hidden="true"
      class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
      role="tooltip"
      data-popper-placement="bottom"
      :style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
      :key="Math.random()"
      v-show="inputValue"
    >
      <el-menu :default-active="state.defaultActive" :unique-opened="true">
        <template v-for="(val, index) in dropdownList">
          <el-sub-menu
            v-if="val.children && val.children.length > 0"
            :index="val.id"
            :key="index"
            @click.stop
          >
            <template #title>
              <svg-icon :name="val.icon" />
              <el-tooltip effect="dark" :content="val.text" placement="right">
                <div class="truncate">{{ val.text }}</div>
              </el-tooltip>
            </template>
            <right-menu-item :chil="val.children" @click="menuClick" />
          </el-sub-menu>
          <template v-else>
            <el-menu-item :index="val.id" :key="index" @click="menuClick(val)">
              <template #title>
                <svg-icon :name="val.icon" />
                <el-tooltip class="w-full" effect="dark" :content="val.text" placement="right">
                  <div class="w-full truncate">{{ val.text }}</div>
                </el-tooltip>
              </template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
:deep(.el-menu) {
  @apply w-[120px] border-none;
  .el-menu-item {
    padding: 0 5px 0 5px !important;
    @apply h-[50px] leading-[50px];
  }

  .el-sub-menu .el-sub-menu__icon-arrow {
    right: 8px !important;
  }

  .el-sub-menu {
    .el-menu-item {
      padding: 0 10px 0 15px !important;
      @apply h-[50px] leading-[50px];
    }
  }

  .el-sub-menu__title {
    padding: 0 10px 0 5px !important;
    @apply h-[50px];
  }
}
</style>
